<!-- 船代详细信息 -->
<template>
  <div class="ship-details-dialog">
    <el-dialog
      width="900px"
      class=""
      top="6vh"
      title="详细信息"
      :visible="$store.state.dialog.shipDetails"
      @close="close">
      <el-row>
        <el-col :span="24">
          <el-card shadow="hover">
            <el-form :model="order" res="order" size="mini">
              <el-row>
                <el-col :span="4">
                  <el-button type="primary" size="mini" @click="exportSettlemen">账单导出</el-button>
                </el-col>
                <el-col :span="5">
                  <span>总金额：{{totalAmount}}</span>
                </el-col>
                <el-col :span="10">&nbsp;</el-col>
                <el-col :span="5">
                  <el-form-item>
                    <el-input v-model="order.searchCon" @input="settlementDetailInfo(1, 15)" placeholder="搜索"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-table
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 0.5)"
              border
              :data="detailInfoData"
              style="width: 100%">
              <el-table-column
                align="center"
                width="110"
                prop="createTime"
                label="日期">
              </el-table-column>
              <el-table-column
                align="center"
                prop="blno"
                width="100"
                label="提单号">
              </el-table-column>
              <el-table-column
                align="center"
                width="110"
                prop="shipAgencyName"
                label="船代">
              </el-table-column>
              <el-table-column
                align="center"
                prop="boxType"
                width="100"
                label="箱型箱量">
              </el-table-column>
              <el-table-column
                align="center"
                prop="txfFee"
                label="提箱费">
              </el-table-column>
              <el-table-column
                align="center"
                prop="ddfFee"
                label="打单费">
              </el-table-column>
              <el-table-column
                align="center"
                prop="fwfFee"
                label="服务费">
              </el-table-column>
              <el-table-column
                align="center"
                prop="abfFee"
                label="安保费">
              </el-table-column>
              <el-table-column
                align="center"
                prop="cqfFee"
                label="超期费">
              </el-table-column>
              <el-table-column
                align="center"
                prop="qtFee"
                label="其他">
              </el-table-column>
              <!-- <el-table-column
                align="center"
                prop="mome"
                label="备注">
              </el-table-column> -->
            </el-table>
            <div class="salesman-man-pagination">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="pageNo"
                :page-sizes="[15, 20, 30]"
                :page-size="number"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  shipSettlementDetailInfo,
  shipExportSettlementDetailInfo
} from '../../api/finance'
export default {
  data () {
    return {
      order: {
        searchCon: '' // 搜索
      },
      pageNo: 1,
      loading: true,
      number: 15,
      total: 0,
      totalAmount: '',
      detailInfoData: []
    }
  },
  watch: {
    '$store.state.dialog.shipDetails' (value) {
      if (this.shipAgencyId2 !== '' && value) {
        this.settlementDetailInfo(1, 15)
      }
    }
  },
  props: {
    shipSettlementId: {
      type: String,
      default: () => {
        return ''
      }
    },
    shipAgencyId2: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  methods: {
    close () {
      this.$store.commit('hide_ship_details_dialog')
    },
    // 结算详细信息
    async settlementDetailInfo (pg, nb) {
      const res = await shipSettlementDetailInfo({
        shipSettlementId: this.shipSettlementId, // 财务结算费用Id
        curpage: pg, // 页码
        pageSize: nb, // 页数
        searchCon: this.order.searchCon // 搜索条件
      })
      if (res.status === 200) {
        if (res.data.length === 0) {
          this.detailInfoData = []
          this.totalAmount = '0'
          this.total = 0
        } else {
          this.detailInfoData = res.data[0].settlementInfo
          this.totalAmount = res.data[0].feeTotal
          this.total = res.data[0].dataCount
        }
        this.loading = false
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
        this.loading = false
      }
    },
    // 导出结算单详细信息
    async exportSettlemen () {
      const res = await shipExportSettlementDetailInfo({
        shipSettlementId: this.shipSettlementId, // 船代财务结算Id
        searchCon: this.order.searchCon, // 搜索条件
        shipAgencyId: this.shipAgencyId2
      })
      if (res.status === 200) {
        window.location.href = res.data[0].path
        this.settlementDetailInfo(1, 15)
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    handleCurrentChange (val) {
      this.settlementDetailInfo(val, this.number)
      this.pageNo = val
    },
    // 每页条数
    handleSizeChange (val) {
      this.settlementDetailInfo(this.pageNo, val)
      this.number = val
    }
  }
}
</script>

<style scoped lang="less">

</style>
